<template>
  <div class="productAnswer">
    <div class="answerTop">
      <p>有什么疑问，问问买过此商品的同学吧～</p>
      <span @click="anonymousFn">我要提问</span>
    </div>
    <div class="questionList" v-if="problemList.length">
      <div class="itemBox" v-for="(item, index) of problemList" :key="item.problemId">
        <div class="itemTit">
          <h3><span>问</span>{{ item.problem }}</h3>
          <span class="nameOrTime">{{ item.name }} {{ item.createTime }}</span>
        </div>
        <div class="replyListBox">
          <ul :class="{moreShow: current === index}" v-if="item.answers.length">
            <li v-for="(reply, index) of item.answers" :key="reply.answerId">
              <i v-if="index === 0">答</i>
              <div class="replyInfo">
                <span class="info">{{ reply.answer }}</span>
                <span class="time">{{ reply.name }} {{ reply.createTime }}</span>
              </div>
            </li>
          </ul>
          <div v-else style="height:30px;margin-top:15px;font-size:14px;color:#999999;">
            <span>暂无回答</span>
          </div>
          <div class="btnBox">
            <div
              class="moreBtn"
              v-if="item.answers.length>1"
              @click="clickMoreList(index)">
              {{ current === index ? '收起回答' : '显示更多答复' }}
              <i class="iconfont" v-html="current === index ? '&#xe660;' : '&#xe695;'"></i>
            </div>
            <div v-else></div>
            <div
              v-if="item.ifAnswer"
              class="replyBtn" @click="toAnswer(item.problem,item.problemId)">我要回答</div>
          </div>
        </div>
      </div>
      <el-pagination
        style="margin-bottom:20px;"
        background
        layout="prev, pager, next, jumper"
        :page-size="pageSize"
        :current-page="page"
        @current-change="changePage"
        :total="total" />
    </div>
    <el-dialog
      title="提问"
      v-model="qaDialog"
      width="600px"
      :center="true"
      :before-close="qaDialogClose">
      <div class="qaDialogBox">
        <p class="qaInfo">您的问题将推送给已购用户，TA们会帮您解答哦～</p>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          resize="none"
          v-model="putQuestion"
          maxlength="200" />
        <el-checkbox v-model="anonymous">匿名提问</el-checkbox>
      </div>
      <template #footer>
        <el-button @click="qaDialog = false">取 消</el-button>
        <el-button class="submit" @click="addProblem">发 布</el-button>
      </template>
    </el-dialog>
    <el-dialog
      title="回答"
      v-model="replyDialog"
      width="600px"
      :center="true"
      :before-close="replyDialogClose">
      <div class="qaDialogBox">
        <p class="qaInfo">问：{{ questionTitle }}</p>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          resize="none"
          v-model="putReply"
          maxlength="200" />
        <el-checkbox v-model="anonymousReply">匿名回答</el-checkbox>
      </div>
      <template #footer>
        <el-button @click="replyDialog = false">取 消</el-button>
        <el-button class="submit" @click="addAnswer">发 布</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getProductProblem, askProductProblem, answerProductProblem } from '@/api/product.js'

const route = useRoute()

const qaDialog = ref(false)
const replyDialog = ref(false)
const putQuestion = ref('')
const putReply = ref('')
const anonymous = ref(false)
const anonymousReply = ref(false)
const current = ref(null)
const problemList = ref([])
const questionTitle = ref('')
const problemId = ref(null)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const currentPro = ref(JSON.parse(route.query.proData))

onMounted(getProblems)

async function getProblems () {
  const response = await getProductProblem({
    productId: currentPro.value.productId,
    page: page.value,
    pageSize: pageSize.value
  })
  const res = response.data
  if (res.code === '200') {
    problemList.value = res.data.list
    total.value = parseInt(res.data.total)
  } else {
    ElMessage.warning(res.message)
  }
}

async function addProblem () {
  if (putQuestion.value === '') {
    ElMessage.warning('请输入问题内容')
    return
  }
  const response = await askProductProblem({
    ifAnonymous: anonymous.value ? 1 : 0,
    problem: putQuestion.value,
    productId: currentPro.value.productId
  })
  const res = response.data
  if (res.code === '200') {
    ElMessage.success('提问成功')
    putQuestion.value = ''
    anonymous.value = false
    qaDialog.value = false
    getProblems()
  }
}

async function addAnswer () {
  if (putReply.value === '') {
    ElMessage.warning('请输入回答内容')
    return
  }
  const response = await answerProductProblem({
    ifAnonymous: anonymousReply.value ? 1 : 0,
    answer: putReply.value,
    productId: currentPro.value.productId,
    problemId: problemId.value
  })
  const res = response.data
  if (res.code === '200') {
    ElMessage.success('回答成功')
    putReply.value = ''
    anonymousReply.value = false
    getProblems()
  }
  replyDialog.value = false
}

function anonymousFn () {
  qaDialog.value = true
}

function qaDialogClose () {
  qaDialog.value = false
}

function toAnswer (title, id) {
  questionTitle.value = title
  problemId.value = id
  replyDialog.value = true
}

function replyDialogClose () {
  replyDialog.value = false
}

function clickMoreList (index) {
  current.value = current.value === index ? null : index
}

function changePage (val) {
  page.value = val
  getProblems()
}
</script>
<style lang="scss" scoped>
.productAnswer {
  .answerTop {
    height: 110px;
    background: #F9F9F9;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    p {
      color: #333333;
      font-size: 14px;
      margin: 0 0 25px 0;
    }
    span {
      width: 94px;
      height: 28px;
      line-height: 28px;
      color: #C83732;
      border: 1px solid #C83732;
      font-size: 14px;
      display: block;
      margin: 0 auto;
      cursor: pointer;
    }
  }
  :deep(.el-dialog__body){
    .qaDialogBox {
      .qaInfo {
        color: #999999;
        font-size: 14px;
        margin-bottom: 20px;
      }
    }
    .el-textarea__inner {
      padding: 15px;
    }
    .el-checkbox {
      margin-top: 10px;
    }
  }
  :deep(.el-dialog__footer){
    padding-top: 20px;
    .el-button {
      width: 200px;
      height: 50px;
      color: #333;
      background-color: #F3F4F5;
      font-size: 16px;
      border-radius: 0;
    }
    .submit{
      color: #FFEBC4 !important;
      background-color: #333 !important;
    }
  }
  .questionList {
    margin-top: 30px;
    padding-right: 20px;
    .itemBox {
      padding-bottom: 20px;
      border-bottom: 1px solid #E5E5E5;
      margin-bottom: 30px;
      .itemTit {
        display: flex;
        justify-content: space-between;
        h3 {
          flex: 1;
          span {
            width: 18px;
            height: 18px;
            text-align: center;
            line-height: 18px;
            background-color: #C83732;
            display: inline-block;
            color: #FFFFFF;
            font-size: 12px;
            margin-right: 10px;
          }
          color: #333333;
          font-size: 14px;
        }
        .nameOrTime {
          font-size: 14px;
          color: #999999;
          margin-left: 30px;
        }
      }
      .replyListBox {
        ul {
          margin-top: 15px;
          height: 30px;
          overflow: hidden;
          li {
            display: flex;
            margin-bottom: 20px;
            position: relative;
            i {
              position: absolute;
              left: 0;
              width: 18px;
              height: 18px;
              background-color: #C5AA7B;
              border-radius: 4px;
              display: inline-block;
              color: #FFFFFF;
              line-height: 18px;
              text-align: center;
              font-size: 12px;
              font-style: normal;
            }
            .replyInfo {
              display: flex;
              flex: 1;
              justify-content: space-between;
              border-bottom: 1px solid #E5E5E5;
              margin-left: 28px;
              padding-bottom: 20px;
              .info {
                color: #333333;
                font-size: 14px;
                position: relative;
                flex: 1;
              }
              .time {
                color: #999999;
                font-size: 14px;
                margin-left: 30px;
              }
            }
          }
          li:last-child {
            margin-bottom: 15px;
          }
        }
        .moreShow {
          height: auto;
        }
        .btnBox {
          display: flex;
          justify-content: space-between;
          .replyBtn {
            color: $mainGlod;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid $mainGlod;
            padding: 4px 10px;
          }
          .moreBtn {
            color: $mainGlod;
            font-size: 12px;
            margin-left: 28px;
            cursor: pointer;
            i {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
